// 头部导航栏开始
.navbar-default {
  background-color: #222222;

  .navbar-brand>img {
    margin-top: -10px;
  }

  .navbar-nav>.active>a {
    color: #fff;
    background-color: #080808;
  }

  .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #080808;
  }

  .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #080808;
  }

  .navbar-nav>li>a:hover {
    color: #777;
  }

  .navbar-nav>li>a:focus {
    color: #777;
  }
}

.navbar {
  border-radius: unset;
  border: unset;
  margin-bottom: 0;
}

@media (max-width:992px) {
  .navbar-header {
    float: none;
  }

  .navbar-left,
  .navbar-right {
    float: none !important;
  }

  .navbar-toggle {
    display: block;
  }

  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }

  .navbar-nav {
    float: none !important;
    margin-top: 7.5px;
  }

  .navbar-nav>li {
    float: none;
  }

  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .collapse.in {
    display: block !important;
  }

}

// 头部导航栏结束

// 底部开始
footer {
  padding: 3vw 0;
  background-color: #3b3b3b;

  .container {
    .box {
      display: flex;
      justify-content: space-between;

      .left {
        font-size: 14px;
        color: #8c8d94;
      }

      .right {
        display: flex;

        .image {
          padding-left: 30px;
          position: relative;

          .QRcode {
            width: 10vw;
            height: 10vw;
            position: absolute;
            top: -10vw;
            left: -1vw;
            z-index: 1;
            display: none;
          }

          &:hover .QRcode {
            display: block;
          }
        }
      }
    }
  }
}

// 响应式
@media (max-width:768px) {
  footer {
    .container {
      .box {
        flex-wrap: wrap;

        .left {
          width: 100%;
          text-align: center;
          font-size: 10px;
        }

        .right {
          width: 70%;
          margin: 0 auto;
          margin-top: 3vw;

          .image {
            .QRcode {
              top: -12vw;
              left: 8vw;
            }
          }
        }
      }
    }
  }
}

// 底部结束